<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>倒计时</title>
  <style></style>
</head>

<body>
  <span class="day">小时</span>
  <span class="hour">小时</span>
  <span class="fen">分钟</span>
  <span class="miao">秒数</span>

  <script>
    function getTime() {
      // 得到当前时间的时间戳
      const now = +new Date()
      // 未来时间的时间戳
      const future = +new Date('2024-05-18 00:00:00')
      console.log(now, future);
      // 得到时间戳后转换为秒
      const date = (future - now) / 1000
      console.log(date);
      let d = parseInt(date / 60 / 60 / 24)
      let h = parseInt(date / 60 / 60 % 24)
      let m = parseInt(date / 60 % 60);
      let s = parseInt(date % 60);
      document.querySelector('.day').innerHTML = d + '天'
      document.querySelector('.hour').innerHTML = h + '时'
      document.querySelector('.fen').innerHTML = m + '分'
      document.querySelector('.miao').innerHTML = s + '秒'
    }
    getTime()
    setInterval(getTime, 1000)
  </script>
</body>

</html>